<template>
	<view class="page">
		<!-- 不带边框并矩形显示 -->
		<uni-grid :column="3" :show-border="false" :square="false">
			<uni-grid-item><uni-tag text="物业投诉" :type="typeIndex == 0 ? 'error' : 'default'" :circle="false" @click="serviceType(0)"></uni-tag></uni-grid-item>
			<uni-grid-item><uni-tag text="商家服务投诉" :type="typeIndex == 1 ? 'error' : 'default'" :circle="false" @click="serviceType(1)"></uni-tag></uni-grid-item>
			<uni-grid-item><uni-tag text="二手商品投诉" :type="typeIndex == 2 ? 'error' : 'default'" :circle="false" @click="serviceType(2)"></uni-tag></uni-grid-item>
		</uni-grid>
		<uni-grid :column="2" :show-border="false" :square="false">
			<uni-grid-item>
				<uni-tag text="已处理" :type="conIndex == 0 ? 'success' : 'default'" :circle="false" @click="conditionIndex(0)" inverted="true"></uni-tag>
			</uni-grid-item>
			<uni-grid-item><uni-tag text="未处理" :type="conIndex == 1 ? 'error' : 'default'" :circle="false" @click="conditionIndex(1)" inverted="true"></uni-tag></uni-grid-item>
		</uni-grid>

		<!-- 投诉情况 -->
		<view class="evalution">
			<view class="section-tit">{{ complaintName }}</view>
			<view class="eva-list" :class="{ Skeleton: !loaded }">
				<view v-for="(item, index) in complaintList" :key="index" class="eva-item">
					<view v-show="item.content" class="eva-right">
						<text>{{ item.nickname }}</text>
						<text>{{ item.time |formatDate2}}</text>
						<view class="zan-box">
							<text>{{ item.zan }}</text>
						</view>
						<text class="content">{{ item.content }}</text>
						<text class="content">{{ item.modifiedTime }}</text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>
<script>
import uniGrid from '@/components/uni-grid/uni-grid.vue';
import uniGridItem from '@/components/uni-grid-item/uni-grid-item.vue';
import uniTag from '@/components/uni-tag/uni-tag.vue';
import uniLoadMore from '@/components/uni-load-more/uni-load-more.vue';
import share from '@/components/share';
export default {
	components: { uniGrid, uniGridItem, uniTag, uniLoadMore, share },
	data() {
		return {
			typeIndex: 0,
			conIndex: 0,
			loaded: false,
			currentEpd: 1,
			complaintName: '物业投诉',
			complaintList: [
				{
					pic: 'http://gss0.baidu.com/-fo3dSag_xI4khGko9WTAnF6hhy/zhidao/pic/item/77c6a7efce1b9d1663174705fbdeb48f8d546486.jpg',
					nickname: '**物业公司',
					time: '09-20 12:54',
					zan: '小区物业卫生差',
					content: '我们已经通知到物业，尽快整改',
					modifiedTime: '2018-3-19 14:29:11'
				},
				{
					pic: 'http://img0.imgtn.bdimg.com/it/u=2396068252,4277062836&fm=26&gp=0.jpg',
					nickname: '悦生活系统平台',
					time: '09-20 12:54',
					zan: '二手商品信息虚假',
					content: '我们尽快联系到卖家并返还对应的金额',
					modifiedTime: '2018-3-19 14:29:11'
				}
			],
			condition: {
				type: this.typeIndex, //条件查询的种类，0代表物业投诉，1代表商家服务投诉，2代表二手商品投诉
				conIndex: this.conIndex //条件查询的是否解决，0未解决，1代表解决
			}
		};
	},
	//页面加载之后的操作
	onLoad() {
		this.typeIndex = 0;
		this.conIndex = 0;
		this.loadData();
	},
	methods: {
		serviceType(index) {
			//相同的时候就不改变也不发送请求数据
			if (this.typeIndex != index) {
				this.typeIndex = index;
				this.condition.type = index;
				//替换title的名字
				this.complaintName = this.complaintTypeName(index);
				//根据不同类型加载替换数据
				this.loadData();
			}
		},
		conditionIndex(index) {
			//相同的时候就不改变也不发送请求数据
			if (this.conIndex != index) {
				this.conIndex = index;
				this.condition.type = index;
				this.loadData();
			}
		},
		loadData() {
			uni.request({
				url: this.baseurl + '/complaint/findByCondition',
				data: {
					type: this.typeIndex,
					conIndex: this.conIndex,
					ownerId:this.$store.state.userInfo.ownerId
				},
				success: res => {
					this.complaintList=res.data.data
				}
			});
		},
		serviceDetail(index) {
			uni.navigateTo({
				url: 'serviceDetail'
			});
		},

		complaintTypeName(index) {
			if (index == 0) {
				return '物业投诉';
			}
			if (index == 1) {
				return '商家服务投诉';
			}
			if (index == 2) {
				return '二手商品投诉';
			}
		}
	}
};
</script>

<style lang="scss">
.section-tit {
	font-size: $font-base + 2upx;
	color: $font-color-dark;
	margin-bottom: 30upx;
	text-align: center;
}
.evalution {
	display: flex;
	flex-direction: column;
	background: #fff;
	margin-top: 16upx;
	padding: 40upx 0;
}

.eva-item {
	display: flex;
	padding: 20upx 40upx;
	image {
		width: 60upx;
		height: 60upx;
		border-radius: 50px;
		flex-shrink: 0;
		margin-right: 24upx;
	}
}
.eva-right {
	display: flex;
	flex-direction: column;
	flex: 1;
	font-size: $font-sm + 2upx;
	color: $font-color-light;
	position: relative;
	.zan-box {
		display: flex;
		align-items: base-line;
		position: absolute;
		top: 10upx;
		right: 10upx;
		.yticon {
			margin-left: 8upx;
		}
	}
	.content {
		font-size: $font-base;
		color: #333;
		padding-top: 20upx;
	}
}
</style>
